<template>
    <div class="AxisData">
        <el-slider
            class="self_slider"
            v-model="count"
            :max="countMax"
            :min="countMin"
            :marks="guideMarks(countMin, countMax)"
            :show-tooltip="false"
            vertical
            disabled
            show-tooltip
            height='250px'
        >
        </el-slider>
    </div>
</template>
<script>
import * as echarts from 'echarts';

export default {
    name: 'CompassBarL',
    data() {
        return {
            count: 0.1,
            countMin: -10,
            countMax: 10
        };
    },
    computed: {
        marks() {
            let marks = {};
            for (let i = 0; i <= 31; i++) {
                if (i % 1 == 0) {
                    marks[i] = i + "";
                }
            }
            return marks;
        },

    },
    methods : {
        textData : function() {
            this.count = ((Math.random() * 20)).toFixed(3) * 1
        },
        addData : function() {
            this.$axios.get(this.GLOBAL.serverIp + '/api/compassBoard/').then((res) => {
            })
        },
        guideMarks (min, max) {
            const marks = {}
            for (let i = min; i <= max; i++) {
                if ((i === min) || (i === max)) {
                    if (i < 0) {
                        marks[i] = {
                            style: {
                                color: '#C0911F'
                            },
                            label: this.$createElement('div', { class: 'marks' }, [
                                this.$createElement('div', { class: 'marks-valueUP' }, i)
                            ])
                        }
                    }
                    else {
                        marks[i] = {
                            style: {
                                color: '#C0911F'
                            },
                            label: this.$createElement('div', { class: 'marks' }, [
                                this.$createElement('div', { class: 'marks-value' }, i)
                            ])
                        }
                    }
                }
                else if (i % 10 === 0) {
                    // marks[i] = i + ''
                    if (i === 0) {
                        marks[i] = {
                            style: {
                                color: '#C0911F'
                            },
                            label: this.$createElement('div', { class: 'marks' }, [
                                this.$createElement('div', '—'),
                                this.$createElement('div', { class: 'marks-line2' }, '—'),
                                this.$createElement('div', { class: 'marks-valuer' }, i)
                            ])
                        }
                    } else if (i < 0) {
                        marks[i] = {
                            style: {
                                color: '#C0911F'
                            },
                            label: this.$createElement('div', { class: 'marks' }, [
                                this.$createElement('div', '—'),
                                this.$createElement('div', { class: 'marks-valuer' }, i)
                            ])
                        }
                    }
                    else {
                        marks[i] = {
                            style: {
                                color: '#C0911F'
                            },
                            label: this.$createElement('div', { class: 'marks' }, [
                                // this.$createElement('div', '-'),
                                // this.$createElement('div', { class: 'marks-line' }, '-'),
                                this.$createElement('div', { class: 'marks-line4' }, '—'),
                                this.$createElement('div', { class: 'marks-value' }, i)
                            ])
                        }
                    }
                } else if (i < 0) {
                    marks[i] = {
                        style: {
                            color: '#C0911F'
                        },
                        // label: this.$createElement('span', '|')
                        label: this.$createElement('div', { class: 'marks' }, [
                            this.$createElement('div', '-'),
                            // this.$createElement('div', { class: 'marks-line' }, '-')
                        ])
                    }
                }
                else {
                    marks[i] = {
                        style: {
                            color: '#C0911F'
                        },
                        // label: this.$createElement('span', '|')
                        label: this.$createElement('div', { class: 'marks' }, [
                            // this.$createElement('div', '-'),
                            this.$createElement('div', { class: 'marks-line3' }, '-')
                        ])
                    }
                }
            }
            return marks
        }
    },
    mounted() {
        setInterval(this.textData, 3000);
        // setInterval(this.addData, 3000);
    },
};
</script>

<style scoped lang="css">
.AxisData {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 25%;
    text-shadow: none;
}

.self_slider {
    width: 90%;
    margin: 20px auto 0;
    height: 90px;
}
.el-slider__marks-text span {
    display: inline-block;
    height: 17px !important;
    overflow: hidden;
}
>>> .marks {
    text-align: center;
    position: relative;
    font-size: 30px;
    top : -2px;
}
>>> .marks-line {
    position: absolute;
    left: -12px;
    top : 0px;
    font-size: 30px;
}
>>> .marks-line2 {
    position: absolute;
    left: -30px;
    top : 0px;
    font-size: 30px;
}
>>> .marks-line3 {
    position: absolute;
    left: -12px;
    top : -16px;
    font-size: 30px;
}
>>> .marks-line4 {
    position: absolute;
    left: -30px;
    top : -17.5px;
    font-size: 30px;
}
>>> .marks-value {
    position: absolute;
    left: -55px;
    top: 5px;
    font-size: 20px;
}
>>> .marks-value0 {
    position: absolute;
    left: -50px;
    top: 0px;
    font-size: 20px;
}
>>> .marks-valuer {
    position: absolute;
    left: 30px;
    top: 0px;
    font-size: 20px;
}
>>> .marks-valueUP {
    position: absolute;
    left: 30px;
    top: -16px;
    font-size: 20px;
}
>>> .el-slider__runway {
    height: 0px;
    width: 0px;
}
>>> .el-slider.is-vertical .el-slider__runway {
    width: 3px;
    background-color: #C0911F;
}
>>> .el-slider__bar {
    height: 0px;
    width: 0px;
    opacity: 0;
}
>>> .el-slider.is-vertical .el-slider__bar {
    width: 0px;
    opacity: 0;
}
>>> .el-slider__stop {
    opacity: 0;
    height: 0px;
    width: 0px;
}
>>> .el-slider__button-wrapper {
    left: 22px;
}
>>> .el-slider__button {
    border: none;
    background-color: transparent;
}
>>> .el-slider__button::after, .el-slider__button.dragging::after {
    content: "";
    display: block;
    position: absolute;
    width: 0;
    height: 0;
    border: 12px solid transparent;
    border-bottom-color: #C0911F;
    left: 5px;
    top: 5px;
    transform: rotate(270deg);
}
>>> .el-slider__button-wrapper .el-tooltip, .el-slider__button-wrapper::after {
    display: block;
}
>>> .el-slider__button.hover, .el-slider__button.dragging {
    transform: scale(1.0);
}
>>> .el-slider__input {
    margin-top: 3px;
    width: 50%;
    position: absolute;
    top: 25%;
    left: 170px;
}
>>> .el-slider__runway.show-input {
    margin-right: 0;
    width: auto;
}

>>> .el-slider.is-vertical .el-slider__marks-text {
    left: 2.5px;
}
</style>

